<template>
	<!-- <div class="wrapper">
		<div class="title">我的订单</div>
		<div class="orders" v-for="(item,index) in orderList" :key="index">
			<div class="order">
				<div class="order_title">
					{{item.shopName}}
					<span class="order_status" v-if="!item.isCanceled">已下单</span>
					<span class="order_status" v-if="item.isCanceled">已取消</span>
				</div>
				<div class="order_content">
					<div class="order_content_imgs" v-for="(product,index2) in item.orderList" :key="product.product_id">
						<img :src="product.product_imgUrl" class="order_content_img">
					</div>
					<div class="order_content_info">
						<div class="order_content_price">￥{{item.totalPrice}}</div>
						<div class="order_content_count">共{{item.count}}件</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<Docker :currentIndex='2'></Docker> -->
	
	<div class="wrapper">
		<div class="title">我的订单</div>
		<div class="orders" v-for="(item,index) in orderList" :key="index">
			<div class="order">
				<div class="order_title">
					{{item.shopName}}
					<span class="order_status" v-if="!item.isCanceled">已下单</span>
					<span class="order_status" v-if="item.isCanceled">已取消</span>
				</div>
				<div class="order_content">
					<div class="order_content_imgs" v-for="product in item.orderList" :key="product.product_id">
						<img :src="product.product_imgUrl" class="order_content_img">
					</div>
					<div class="order_content_info">
						<div class="order_content_price">￥{{item.totalPrice?.toFixed(2)}}</div>
						<div class="order_content_count">共{{item.count}}件</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<Docker :currentIndex='2'></Docker>

</template>

<script>
	import Docker from '../../components/Docker.vue'
	import { get } from '../../utils/request.js'
	import { ref } from 'vue'
	export default{
		name: 'OrderList',
		components: { Docker },
		setup() {
			const orderList = ref([])
			const userInfo = JSON.parse(localStorage.userInfo)
			const uid = userInfo.uid
			const getOrderList = async () => {
				const result = await get('/api/getorder',{ uid })
				console.log(result)
				if(result?.errno === 0){
					orderList.value = result.data
					console.log(orderList.value)
				}
			}
			getOrderList()			
			return { orderList }
		}
	}
</script>

<style lang="scss" scoped>
	.wrapper {
			overflow-y: auto;
			position: absolute;
			left: 0;
			top: 0;
			bottom: .5rem;
			right: 0;
			background: rgb(248, 248, 248);
			padding: 0;
		}
		.title {
			line-height: .44rem;
			background: #FFF;
			font-size: .16rem;
			color: #333;
			text-align: center;
		}
		.order {
			margin: .16rem;
			padding: .16rem;
			background: #fff;
			&_title {
				margin-bottom: .16rem;
				line-height: .22rem;
				font-size: .16rem;
				color: #333;
			}
			&_status {
				float: right;
				font-size: .14rem;
				color: #999;
			}
			&_content {
				display: flex;
				&_imgs {
					flex: 1;
				}
				&_img{
					width: .4rem;
					height: .4rem;
					margin-right: .12rem;
				}
				&_info {
					width: .7rem;
				}
				&_price {
					margin-bottom: .04rem;
					line-height: .2rem;
					font-size: .14rem;
					color: #E93B3B;
					text-align: right;
				}
				&_count {
					line-height: .14rem;
					font-size: .12rem;
					color: #333;
					text-align: right;
				}
			}
		}
</style>